<template>
  <h1>{{ a }}</h1>
  <!-- <button @click="sayHello"></button> -->
</template>

<script>
// import {h} from 'vue'
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  // vue2的写法是可以兼容的  data...
  // 访问顺序，vue2的配置=>vue3的stepup，但vue3的stepup无法访问vue2的数据
  // (3)目的是：Vue3统一访问数据规范，不乱套(如果有重名优先setup)

  // (1)数据、方法全放在sepup里，用于替代created、beforecreated，
  //    是组合式API，也Vue3的原生写法，代码更清晰

  // (4)不可在setup前加async，因为它默认只有返回对象或渲染函数才能被模板使用，而不是包裹着promise的对象
  setup() {
    let a = 1;
    function sayHello() {
      alert("hello");
    }

    // 返回对象 ----- 组合式API体现出来了
    return {
      a,
      sayHello
    }

    // (2)返回渲染函数----针对具体某个标签单独渲染
    // return ()=>h('h1',a)
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>
